<!--
 * @Author: your name
 * @Date: 2021-08-17 15:10:14
 * @LastEditTime: 2021-08-19 14:57:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dashboard\src\pages\government\components\Left2.vue
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
import { Line } from "@antv/g2plot";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  // 组件名称
  name: "demo",
  // 组件状态值
  setup() {
    const root = ref(null);
    let plot = null;

    let data_line = ref([]);
    const loadData = async () => {
      data_line.value = [
        { year: '周一', value: 600 },
        { year: '周二', value: 400 },
        { year: '周三', value: 350 },
        { year: '周四', value: 500 },
        { year: '周五', value: 490 },
        { year: '周六', value: 600 },
        { year: '周日', value: 700 },
      ];
    };

    const initChart = () => {
      plot = new Line(root.value, {
        data: data_line.value,
        xField: 'year',
        yField: 'value',
        label: {},
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        tooltip: { showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: '#000',
              fill: 'red',
            },
          },
        },
        interactions: [{ type: 'marker-active' }],
        });
      plot.render();
    }
    onMounted(async () => {
      await loadData();
      initChart();
    });

    onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });

    return {
      root,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
